<template>
   <div class="f-fl container">
       <header class="f-fl el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
            <label>设备号:  {{uid}}</label>
            <a class="f-fr btn" @click="savePermission">保存</a>
       </header>
       <div class="select-area el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24">
            <inline-loading ref="loading" v-show="!isShow"></inline-loading>
            <div class="select-block" v-show="isShow">
                 <template v-for="(it,index) in rails">
                         <li class="label-checkbox" :class="it.bind_status?'active':''"><label @click="changeStatus(it,index)"></label><input type="checkbox"  v-model="it.bind_status" :value="it.id"><span>{{it.electronic_fence_name}}</span></li>
                 </template>


            </div>

       </div>

   </div>
</template>
<script>
    import inlineLoading from 'c/com_loading/inline_loading'
  export default{
       data(){
           return{
               uid:'',
               rails:[],
               isShow:false, //是否显示权限列表，加载完之后再显示
           }
       },
       created(){
           this.rails=[]
           this.init()
       },
      components:{
          inlineLoading,
      },
       methods:{
           
           init(){
               this.uid=this.$route.params.uid
               this.$http.get('user/get_user_electronic_fence',{
                   uid:this.uid,
               }).then(res=>{
                   if(!res.result) {
                       this.rails=res.data
                       setTimeout(()=>{
                           this.isShow=true
                       },1000)
                   }
               })
           },
           changeStatus(item,index){
              item.bind_status=!item.bind_status
           },

           savePermission(){
               let pros=[]
               this.rails.forEach(item=>{
                  if(+item.bind_status) pros.push(item.id)
               })
              this.$http.post('user/bind_electronic_fence',{
                  uid:this.uid,
                  electronic_fence_id_array:pros
              }).then(res=>{
                  if(!res.result){
                      this.$message('操作成功')
                      window.history.back()
                  }
              })
           }
       }
  }
</script>
<style lang="scss" scoped>
    .container{
        position:relative;
        font-size:14px;
        background:#fff;
        margin-left:24px;
        width:100%;
        header{
            height:60px;
            line-height:60px;
            border-bottom:1px #ccc solid;
            .btn{
                display:inline-block;
                font-size:14px;
                width:80px;
                height:30px;
                line-height:30px;
                color:#fff;
                background: #3494E7;
                text-align: center;
                margin-right:60px;
                margin-top:15px;
            }
            label{
                margin:0 30px 0 10px;
                font-size:18px;
            }
            label:nth-of-type(1){
                margin-left:24px;
            }
        }
       .select-area{
           position:relative;
           background:#fff;
           margin:24px;
       }
       .select-block{
            input[type='checkbox']{
                display:inline-block;
                width:0px;
                vertical-align: middle;
                opacity:0;
            }
           .sub-checked{
               margin-left:20px;
           }
                 .label-checkbox{
                     display:inline-block;
                     width:180px;
                     font-size:14px;
                     line-height:30px;
                     overflow:hidden;
                     white-space: nowrap;
                     word-break: break-all;
                     text-overflow: ellipsis;
                     label{
                        vertical-align: middle;
                         display:inline-block;
                         cursor: pointer;
                         width:12px;
                         height:12px;
                         border:1px #ddd solid;
                         border-radius:1px;
                         color:#888;
                     }
                     &.active{
                          color: #3494E7;
                      span{
                          color:#3494E7;
                      }
                         label{
                             background: #3494E7;
                             border:1px #3494E7 solid;
                             &:after{
                                  height: 3px;
                                  width: 6px;
                                  left: 2px;
                                  display: inline-block;
                                  top: -12px;
                                  content: '';
                                  border-left: 2px solid #fff;
                                  border-bottom: 2px solid #fff;
                                  position: relative;
                                  transform: rotate(-45deg);
                                  transform-origin: center;
                              }
                         }
                      }
                     span{
                         margin-left:5px;
                         color:#888;
                     }
                 }

       }
    }
</style>